<template>
  <demo-content :title="title">
    <p>
      当在浏览器窗口中按下某个键时，浏览器将会生成键盘事件。这些事件发生在当前拥有焦点的
      HTML 元素身上。如果没有元素拥有焦点，那么事件将转移到 window 与 document
      对象。
    </p>
    <p>
      canvas 是一个不可获取焦点的元素，所以在 canvas
      元素上不能添加键盘事件监听器。如果你要检测键盘事件的话，你应该在 document
      或 window 对象上新增键盘事件监听器才对。
    </p>
    <p>一共有三种键盘事件：</p>
    <ul>
      <li>keydown</li>
      <li>keypress</li>
      <li>keyup</li>
    </ul>
    <p>
      keydown 与 keyup 是底层事件，激活每次按键是，浏览器都会触发这些事件。
      如果激发 keydown 事件的那个按键能打印出某个字符，那么浏览器将会在触发
      keyup 事件之前先产生 keypress 事件。
      如果在一段时间内持续地按住某个可以打印出字符的键，那么浏览器会在 keydown
      和 keyup 事件之间产生一系列的 keypress 事件。
    </p>

    <canvas ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "键盘事件";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();

let width = 0;
// let height = 0;
let curX = 0;
let curY = 20;
const deltaX = curY;
const deltaY = curY;
function drawCharactor(ctx: CanvasRenderingContext2D, c: string) {
  if (curX + deltaX > width) {
    curX = 0;
    curY += deltaY;
  }
  console.log(`(${curX}, ${curY})`);
  ctx.fillText(c, curX, curY);
  curX += deltaX;
}

onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  ctx.font = `${curY}px Georgia`;
  width = canvas.width;
  // height = canvas.height;
  window.onkeydown = (e) => {
    // console.log("press", e.key);
    drawCharactor(ctx, e.key);
  };
});
</script>

<style src="./default.css" scoped></style>
